<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="ljc">
    <title></title>
    <script src="js/jquery-3.1.1.js">
        
    </script>
    <style>
        .menu{
            height: 48px;
            width: 999px;
            margin: 40px auto 0 auto;
            background-image: url(s_03.jpg);
        }
        ul{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        li{
            float: left;
            overflow: hidden;
            position: relative;
            text-align: center;
        }
        a{
            position: relative;
            display: block;
            width: 111px;
            height: 48px;
            text-decoration: none;
            cursor: pointer;
            font-weight: bold;
            line-height: 48px;
            color: white;
        }
        a>span{
            display: inline-block;
            height: 48px;
            position: absolute;
            left:0;
            width: 111px;
        }
        a>span.out{
            top:0;           
        }
        a>span.over{
            top:-48px;
            background-image: url(w_03.jpg);
        }
        .cls{
            clear: both;
        }
        
    </style>
</head>
<body>
    <div class="menu">
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">大头网</a></li>
        <li><a href="">气象新闻</a></li>
        <li><a href="">行政审批</a></li>
        <li><a href="">信息公开</a></li>
        <li><a href="">气象科普</a></li>
        <li><a href="">党风廉政</a></li>
        <li><a href="">党风廉政</a></li>
        <li><a href="">气象科普</a></li>
    </ul>
    <div class="cls"></div>
    </div>
</body>
</html>
<script>
    // 给a标签内容的外面包裹一层span标签
    $('a').wrapInner('<span class="out"></span>');  
    $('a').each(function(){
        // 追加新的元素。在元素内部的末尾处添加新的标签
        $(this).append('<span class="over">' + $(this).text()+'</span>')
    })
    $('a').hover(function(){
        $('.out',this).stop().animate({'top':'48px'},300)
        $('.over',this).stop().animate({'top':'0'},300)
    },function(){
        $('.out',this).stop().animate({'top':'0'},300)
        $('.over',this).stop().animate({'top':'-48px'},300)
    })
    
</script>